<template>
	<div class="block">
		<div class="list">
			<div class="item" v-for="item in list" :key="item.name">
				<p>
					<span>{{ item.value }}</span>
					<span>{{ item.unit }}</span>
				</p>
				<p>{{ item.name }}</p>
			</div>
		</div>

		<div class="table">
			<div class="item title">
				<p v-for="item in tableData.column" :key="item">
					{{ item }}
				</p>
			</div>
			<div class="item-wrap">
				<div
					class="item"
					@click="onClick(item)"
					v-for="(item, index) in tableData.list"
					:key="index"
				>
					<p>{{ index + 1 }}</p>
					<p>{{ item.name }}</p>
					<p>{{ item.bdfwjzrydddzxcsl }}</p>
					<p>{{ item.qlddcsl }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, defineEmits, defineProps, onMounted, reactive, ref } from 'vue'
import { ddzxcwgcdmsg, ddzxcwgcdbar } from '@/service/village'

const props = defineProps({
	date: {
		type: Object,
		default: () => []
	}
})
const list = ref([
	{
		name: '电动自行车数量',
		value: 0,
		res: 'bdfwjzrydddzxcsl',
		unit: '辆'
	},
	{
		name: '清理电动自行车数量',
		value: 0,
		res: 'qlddcsl',
		unit: '辆'
	},
])

const getData = async () => {
	const result = await ddzxcwgcdmsg({
		date: props.date
	})
	Object.keys(result?.data)?.forEach(key => {
		list.value?.map(item => {
			if (item.res === key) item.value = result?.data?.[key]
		})
	})
}
const emits = defineEmits(['toPage'])

const tableData = reactive({
	column: [
		'序号',
		'行政区域',
		'电动自行车数量(辆)',
		'清理数量(辆)',
	],
	list: []
})

const getTable = async () => {
	const result = await ddzxcwgcdbar({
		date: props.date
	})
	tableData.list = result?.data
}

const onClick = (record) => {
	emits('toPage', {
		record,
		type: 4
	})
}
onMounted(() => {
	getData()
	getTable()
})
</script>

<style scoped lang="less">
.block {
	.table {
		margin: 24px;
		.item-wrap {
			height: 300px;
			overflow: auto;
			.item:nth-of-type(1) {
				border-top: 0;
			}
		}
		.title {
			p {
				font-weight: 600;
			}
		}
		.item {
			display: flex;
			min-height: 40px;
			line-height: 40px;
			border: 1px solid var(--border-color);
			border-top: 0;
			box-sizing: border-box;
			&:nth-of-type(1) {
				border-top: 1px solid var(--border-color);
			}
			p {
				flex: 1;
				padding: 12px;
				border-left: 1px solid var(--border-color);
				&:nth-of-type(1) {
					flex: none;
					width: 80px;
					border-left: 0;
				}
			}
		}
	}
	.list {
		display: flex;
		margin: 24px 24px 0;
		gap: 24px;
		.item {
			background: #F6F6F6;
			flex: 1;
			height: 96px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			p {
				min-height: 40px;
				line-height: 40px;
				font-size: 24px;
				&:nth-of-type(1) {
					span {
						&:nth-of-type(1) {
							font-size: 40px;
							font-weight: 600;
							color: var(--van-primary-color);
							margin-right: 6px;
						}
					}
				}
				&:nth-of-type(2) {
					color: #B9B9B9;
					text-align: center;
				}
			}
		}
	}

}
</style>
